<template>
  <ScreenAdapter>
    <a-spin :spinning="loading" size="large">
      <div class="home-page">
        <div class="home-title">
          <img src="@/assets/images/bg/logo.png" alt="">
          <div class="title">{{ placeName || '未知科室' }}</div>
          <div class="time">
            <div class="week">
              <p>{{ carWeek }}</p>
              <p>{{ curDate }}</p>
            </div>
            <div class="clock">
              <span>{{ curTime }}</span>
            </div>
          </div>
        </div>
        <div class="table-main">
          <ul>
            <li>
              <span>编号</span>
              <span>上报科室</span>
              <span>时间</span>
              <span>报修地点</span>
              <span>事件内容</span>
              <span>事件状态</span>
            </li>
            <li v-for="(item, index) in displayList" :key="item.id">
              <span>{{ currentPage * pageSize + index + 1 }}</span>
              <span>{{ item.checkPlaceName }}</span>
              <span>{{ moment(item.recordTime).format('MM-DD HH:mm:ss') }}</span>
              <span>{{ item.checkPlace }}</span>
              <span>{{ item.checkContent }}</span>
              <span :class="getTypeClass(item.eventType)">{{ getTypeText(item.eventType) }}</span>
            </li>
          </ul>
          
          <!-- 轮播指示器 -->
          <div class="carousel-indicators" v-if="totalPages > 1">
            <span 
              v-for="i in totalPages" 
              :key="i" 
              :class="{ active: i - 1 === currentPage }"
              @click="goToPage(i - 1)"
            ></span>
          </div>
        </div>
      </div>
    </a-spin>
  </ScreenAdapter>
</template>

<script setup>
import { ref, inject, onMounted, onBeforeUnmount, computed, watch } from "vue"
import router from "@/route/index.js"
import { useRoute } from "vue-router";
import ScreenAdapter from "./screen.vue"
import useRealTime from './useRealTime';
import { repairCommunicationData } from '@/api/common'
import moment from 'moment'

const { curDate, curTime, carWeek, } = useRealTime()
const loading = ref(false),
  toast = inject("toast"),
  route = useRoute(),
  placeName = ref(route.query.placeName),
  userInfo = ref({}),
  timer = ref(null),
  dataList = ref([]),
  currentPage = ref(0),
  pageSize = ref(10),
  lastFetchTime = ref(0);

// 计算属性：总页数
const totalPages = computed(() => {
  return Math.max(1, Math.ceil(dataList.value.length / pageSize.value));
});

// 计算属性：当前显示的数据
const displayList = computed(() => {
  const start = currentPage.value * pageSize.value;
  const end = start + pageSize.value;
  return dataList.value.slice(start, end);
});

onMounted(() => {
  userInfo.value = JSON.parse(localStorage.getItem("SAVE_USER_INFO"));
  
  // 初始化时获取数据
  getList();
  
  // 使用单一定时器处理数据刷新和轮播
  timer.value = setInterval(() => {
    const now = Date.now();
    
    // 每30秒刷新一次数据
    if (now - lastFetchTime.value > 10000) {
      getList();
    }
    
    // 数据超过10条时，每10秒切换一次页面
    if (dataList.value.length > pageSize.value) {
      currentPage.value = (currentPage.value + 1) % totalPages.value;
    }
  }, 5000); // 基础定时器为10秒
});

onBeforeUnmount(() => {
  if (timer.value) {
    clearInterval(timer.value);
    timer.value = null;
  }
});

// 数据获取
async function getList() {
  try {
    loading.value = true;
    const res = await repairCommunicationData({ checkPlaceName: route.query.placeName, eventType: 0 });
    
    // 记录数据获取时间
    lastFetchTime.value = Date.now();
    
    // 保存原始数据
    const newData = res.data || [];
    
    // 智能更新数据，避免重置当前轮播状态
    if (newData.length !== dataList.value.length) {
      // 如果数据长度变化，重置轮播
      dataList.value = newData;
      currentPage.value = 0;
    } else {
      // 如果数据长度相同，只更新内容
      dataList.value = [...newData];
    }
  } catch (error) {
    console.error('获取数据异常：', error);
  } finally {
    loading.value = false;
  }
}

// 手动切换页面
function goToPage(page) {
  currentPage.value = page;
}

// 状态文本转换
function getTypeText(val) {
  const statusMap = {
    '0': '未接单',
    '1': '已接单',
    '2': '处理中',
    '3': '等待中',
    '4': '已办结'
  };
  return statusMap[val] || '未知';
}

// 状态样式转换
function getTypeClass(val) {
  const statusClass = {
    '0': 'red',
    '1': 'blue',
    '2': 'yellow',
    '3': 'orange',
    '4': 'green'
  };
  return statusClass[val] || '';
}
</script>

<style lang="less" scoped>
/* 样式部分保持不变 */
.home-page {
  overflow: none;
  background-color: #ffffff;

  .home-title {
    width: 100%;
    height: 206px;
    background-color: #638b74;
    display: flex;
    justify-content: space-between;
    line-height: 206px;

    img {
      width: 894px;
    }

    .title {
      font-size: 56px;
      color: #ffffff;
      font-weight: 400;
      font-family: CY;
      margin-right: 120px;
      text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
    }

    .time {
      display: flex;
      justify-content: space-between;
      font-family: CN;

      .week {
        font-size: 28px;
        font-weight: 400;
        color: #ffffff;
        text-align: right;
        padding-top: 60px;
        margin-right: 35px;

        p {
          height: 28px;
          line-height: 28px;
          margin-bottom: 20px;
        }
      }

      .clock {
        margin-right: 75px;
        font-size: 83px;
        color: #ffffff;
        font-weight: 300;
        line-height: 190px;
      }
    }
  }

  .table-main {
    width: 100%;
    margin-top: 10px;
    height: 865px;
    background-color: rgba(20, 174, 85, 0.2);
    overflow: hidden;
    position: relative;

    ul {
      margin: 0;
      padding: 0;
    }

    li {
      display: flex;
      justify-content: space-between;
      text-align: center;
      height: 72px;
      line-height: 72px;
      color: #ffffff;
      font-size: 30px;
      font-weight: 400;
      font-family: CY;
      text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);

      span {
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      span:nth-child(1) {
        width: 7%;
      }
      span:nth-child(2) {
        width: 12%;
      }
      span:nth-child(3) {
        width: 13%;
      }
      span:nth-child(4) {
        width: 23%;
      }
      span:nth-child(5) {
        width: 35%;
      }
      span:nth-child(6) {
        width: 15%;
      }

      .red {
        color: #DC2C2C;
      }

      .blue {
        color: rgb(58, 149, 255);
      }

      .yellow {
        color: #EFE257;
      }

      .orange {
        color: #d07d30;
      }

      .green {
        color: #6BFF57;
      }
    }

    ul>li:nth-child(1) {
      background-color: #638B74 !important;
      font-size: 33px;
    }

    ul li:nth-child(odd) {
      background-color: rgba(10, 117, 55, 0.4);
    }

    ul li:nth-child(even) {
      background-color: rgba(20, 174, 85, 0.1);
    }

    /* 轮播指示器样式 */
    .carousel-indicators {
      position: absolute;
      bottom: 15px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 8px;
      
      span {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.3);
        cursor: pointer;
        transition: all 0.3s;
        
        &.active {
          background-color: #ffffff;
          width: 24px;
          border-radius: 6px;
        }
      }
    }
  }
}

@font-face {
  font-family: CY;
  src: url(@/assets/fonts/FZCuYuan-M03S.woff2);
}

@font-face {
  font-family: CN;
  src: url(@/assets/fonts/苹方黑体-纤细-简.woff);
}
</style>